<template>
<!-- 编辑资源管理 -->
    <div>
        <public-editor :el_title="title">
            <template slot="buttonEditor">
                <el-button style="float: right;" ><router-link :to="{path:'/resource/management'}">返回</router-link></el-button>
            </template>
            <template slot="editorContent">
                <el-form label-position="left"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm edit-from">
                    <div class="editorContent">
                        <!-- <el-form-item label="用户名" prop="username">
                            <el-input v-model="ruleForm.username" style="width:40%"></el-input>
                        </el-form-item> -->
                        <el-form-item label="资源编码" prop="code">
                            <el-input v-model="ruleForm.code" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="资源名称" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="资源类型" prop="type">
                            <el-input v-model="ruleForm.type" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="资源描述" prop="description">
                            <el-input v-model="ruleForm.description" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="资源方法" prop="method">
                            <el-select v-model="ruleForm.method" placeholder="请选择资源方法" style="width:40%">
                                <el-option v-for="item in methodoptions" :key="item" :label="item"  :value="item"></el-option>
                            </el-select>
                            <!-- <el-input v-model="ruleForm.method" style="width:40%"></el-input> -->
                        </el-form-item>
                        <el-form-item label="资源路径" prop="url">
                            <el-input v-model="ruleForm.url" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleAdd('ruleForm')">提交</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </template>
        </public-editor>
    </div>
</template>
<script>
import publicEditor from "manage-sys-libs/src/components/managePublicEditor/index.vue"
export default {
    components:{
        publicEditor,
    },
    data(){
        return{
            title:"添加资源",
            // 所在城市
            ruleForm: {
                code:"",
                description:"",
                method:"",
                name:"",
                type:"",
                url:"",
                username:""
            },
            rules: {
                code: [
                    { required: true, message: '请输入资源编码', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请输入资源描述', trigger: 'blur' },
                ],
                method: [
                    { required: true, message: '请输入资源方法', trigger: 'change' },
                ],
                name: [
                    { required: true, message: '请输入资源名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入资源类型', trigger: 'blur' },
                ],
                url: [
                    { required: true, message: '请输入资源路径', trigger: 'blur' },
                ],
                // username: [
                //     { required: true, message: '请输入用户名', trigger: 'blur' },
                // ],
                
            },
            addorupdate:true,  
            methodoptions:["POST","GET","DELETE","PUT"]                   
        };
    },
    created(){
        if(this.$route.query && this.$route.query.type === "edit"){
            let data = this.$store.getters.resourceListItem;
            if(data){
                this.ruleForm = data;
                this.title = "编辑资源";
                this.addorupdate = false;
                // 处理图片
                this.loadUrl = this.ruleForm.logoUrl;
            }else{
                this.title = "添加资源";
                this.addorupdate = true;
            }
        }
    },
    methods: {
        // 提交
        handleAdd(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.addorupdate){
                        // 添加
                        this.$store.dispatch("resource/add_resourceAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/resource/management'})
                            };
                        })
                    }else{
                        // 编辑
                        this.$store.dispatch("resource/update_resourceAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/resource/management'})
                            };
                        })
                    } 
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },        
    }
    
}
</script>
<style lang="scss" scope>
.edit-from{
    .firstClass{
        .el-input{
            width: auto;
        }
    }
    
}



</style>